<template>
  <div class="main">
    <mianbao :title="title"></mianbao>
    <el-row class="container">
      <theadUtils
        :options="options"
        @setMon="setMon"
        @changeVal="changeVal"
        @seachys="seachys"
        @resetSH="resetSH"
      ></theadUtils>
      <el-row :span="24" class="table-connent">
        <el-table
          :data="tableData"
          style="width: 100%"
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column prop="name" label="医生姓名" min-width="150">
          </el-table-column>
          <el-table-column label="科室" min-width="150">
            <template #default="scope">
              <span
                >{{ scope.row.department_one_name }}-{{
                  scope.row.department_two_name
                }}</span
              ></template
            >
          </el-table-column>
          <el-table-column :label="item.dateTime" v-for="item in newdata">
            <el-table-column label="上午" min-width="80">
              <template #default="scope">
                <div v-for="v in scope.row.has">
                  <div v-if="v && v.sched_date == item.date">
                    <span v-if="v.am_sy != null && v.am != null"
                      >{{ v.am_sy }}/{{ v.am }}</span
                    >

                    <span v-if="v.am_sy == null && v.am != null">{{
                      v.am
                    }}</span>
                    <span v-if="v.am == null">休息</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="下午" min-width="80">
              <template #default="scope">
                <div v-for="v in scope.row.has">
                  <div v-if="v && v.sched_date == item.date">
                    <span v-if="v.pm_sy != null && v.pm != null"
                      >{{ v.pm_sy }}/{{ v.pm }}</span
                    >
                    <span v-if="v.pm_sy == null && v.pm != null">{{
                      v.pm
                    }}</span>
                    <span v-if="v.pm == null">休息</span>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="date"
            label="操作"
            class-name="caozuo"
            min-width="150"
          >
            <template #default="scope">
              <el-icon :size="28" color="#0066ff" @click="changerow(scope.row)"
                ><Tools
              /></el-icon>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row class="pages">
        <yema :count="count" @changePage="changePage"></yema>
      </el-row>
    </el-row>
  </div>
  <el-dialog v-model="dialogTableVisible" custom-class="calendar-paiban">
    <el-row class="arrange">
      <el-row class="left-text">
        <div class="name">
          <p>赵医生排版详情</p>
        </div>
        <div class="time">
          <h2>{{ newClickDate.date }}</h2>
          <p>{{ newClickDate.day }}</p>
        </div>
        <div class="closepai">
          <div class="sw">
            <h3>上午</h3>
            <p>接诊时间：8:00-12:00</p>
            <p v-if="swhaoyan">号源数：{{ swhaoyan }}</p>
            <p v-if="swjezhou != null">接诊人数：{{ swjezhou }}</p>
            <p v-if="!swhaoyan">休息</p>
          </div>
          <div class="bar"></div>
          <div class="xw">
            <h3>下午</h3>
            <p>接诊时间：14:00-18:00</p>
            <p v-if="xwhaoyan">{{ contents }}{{ xwhaoyan }}</p>
            <p v-if="xwjezhou != null">接诊人数：{{ xwjezhou }}</p>
            <p v-if="!xwhaoyan">休息</p>
          </div>
        </div>
      </el-row>

      <el-row class="right-set">
        <el-row>
          <el-calendar ref="calendar1" v-model="datapass1">
            <template #header="{ date }">
              <div class="set-left">
                <span>{{ date }}</span>
                <el-button-group>
                  <el-button size="small" @click="selectDate1(0)"
                    >上一月</el-button
                  >
                  <el-button size="small" @click="selectDate1(1)"
                    >今日</el-button
                  >
                  <el-button size="small" @click="selectDate1(2)"
                    >下一月</el-button
                  >
                </el-button-group>
              </div>
              <div>
                <el-button type="primary" size="large" @click="setPaiban"
                  >设置排班</el-button
                >
                <el-button type="primary" plain size="large" @click="cancelPai"
                  >关闭</el-button
                >
              </div>
            </template>
            <template #dateCell="{ data }">
              <div
                @click="selectDay(data)"
                class="content"
                :class="data.isSelected ? 'is-selected' : ''"
              >
                <p class="dateri">
                  {{ data.day.split("-").slice(1).join("-") }}
                  {{ data.isSelected ? "✔️" : "" }}
                </p>
                <p v-for="item in newDoctor" class="haoyuan">
                  <span v-if="item.sched_date == data.day"
                    >号源{{ item.am + item.pm }}</span
                  >
                </p>
              </div>
            </template>
          </el-calendar>
        </el-row>
      </el-row>
    </el-row>
  </el-dialog>
  <el-dialog
    v-model="dialogTableVisible1"
    custom-class="set-paiban calendar-paiban"
    :close-on-click-modal="false"
  >
    <el-row class="arrange">
      <el-row class="left-text">
        <div class="name">
          <p>赵医生排版详情</p>
        </div>
        <div class="time">
          <h2>{{ newClickDate.date }}</h2>
          <p>{{ newClickDate.day }}</p>
        </div>
        <div class="closepai">
          <div class="sw">
            <div class="jz-btn">
              <h3>上午</h3>
            </div>

            <p>接诊时间：8:00-12:00</p>

            <el-input
              v-model.number="swhaoyan"
              placeholder="号源数"
              :disabled="vsdate"
            />
          </div>
          <div class="bar"></div>
          <div class="xw">
            <div class="jz-btn">
              <h3>下午</h3>
            </div>
            <p>接诊时间：14:00-18:00</p>
            <el-input
              v-model.number="xwhaoyan"
              placeholder="号源数"
              :disabled="vsdate"
            />
          </div>
          <el-button class="odas" type="primary" size="large" @click="savaSet"
            >保存设置</el-button
          >
        </div>
      </el-row>

      <el-row class="right-set">
        <el-row>
          <el-calendar ref="calendar" v-model="datapass">
            <template #header="{ date }">
              <div class="set-left">
                <span>{{ date }}</span>
                <el-button-group>
                  <el-button size="small" @click="selectDate(0)"
                    >上一月</el-button
                  >
                  <el-button size="small" @click="selectDate(1)"
                    >今日</el-button
                  >
                  <el-button size="small" @click="selectDate(2)"
                    >下一月</el-button
                  >
                </el-button-group>
              </div>
              <div>
                <el-icon @click="cancel" size="32px"><Close /></el-icon>
              </div>
            </template>
            <template #dateCell="{ data }">
              <div
                @click="amendDay(data)"
                class="content"
                :class="data.isSelected ? 'is-selected' : ''"
              >
                <p class="dateri">
                  {{ data.day.split("-").slice(1).join("-") }}
                </p>
                <p v-for="item in newDoctor" class="haoyuan">
                  <span v-if="item.sched_date == data.day"
                    >号源{{ item.am + item.pm }}</span
                  >
                </p>
              </div>
            </template>
          </el-calendar>
        </el-row>
      </el-row>
    </el-row>
  </el-dialog>
</template>
<script>
import { ref, reactive, toRefs, computed, watch } from "vue";
import theadUtils from "coms/wxq/theadUtils.vue";
import mianbao from "coms/wxq/mianbao.vue";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { getTime } from "../../utils/formDate";
import yema from "../../components/wxq/yema.vue";
import {
  setDesk,
  setScheduling,
  setDocterDate,
  amendWork,
  addWork,
} from "../../utils/api/reserve_wxq";
import formatDay from "../../utils/formatDay";
import tishi from "../../utils/xiaoxitishi";

export default {
  props: {},
  components: { theadUtils, mianbao, yema },
  setup(props, context) {
    const times = (val) => {
      val = val || new Date();
      let time = new Date(val);
      let year = time.getFullYear(); //年
      let month = (time.getMonth() + 1).toString().padStart(2, "0"); //月
      let day = time.getDate().toString().padStart(2, "0"); //日;
      let zhou = time.getDay();
      let week = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ][zhou];
      return { date: year + "-" + month + "-" + day, day: week };
    };
    const data = reactive({
      title: "医生排班",
      options: [],
      tableData: [],
      tableThead: [
        {
          name: "name",
          title: "医生姓名",
        },
        {
          name: "section",
          title: "科室",
        },
      ],
      newdata: getTime(0),
      newDoctor: {}, //单个医生排班数据
      count: 140,
      dialogTableVisible: false,
      newClickDate: times(), //点击时间
      newTimes: times(), //当天时间
      dialogTableVisible1: false,
      value: "", //接诊开关
      value1: "", //接诊开关
      input1: "", //号源数
      input2: "", //号源数
      swhaoyan: null, //上午号源数
      xwhaoyan: null, //下午号源数
      swjezhou: null, //上午接诊人数
      xwjezhou: null, //下午接诊人数
      contents: "号源数:", //标题
      parameter: {
        date: 1,
        page: 1,
        one_id: null,
        two_id: null,
        search: null,
      },
      doctorForm: {
        date: 5,
        id: null,
      },
      addPbFrom: {
        date: null,
        id: null,
        am: null,
        pm: null,
      },
    });
    const datapass = ref(new Date());
    const datapass1 = ref(new Date());
    //时间对比
    const vsdate = computed(() => {
      let day1 = data.newClickDate.date.split("-");
      let str1 = day1.join("");
      let day2 = data.newTimes.date.split("-");
      let str2 = day2.join("");

      return parseInt(str1) < parseInt(str2);
    });
    // data.newdata = getTime(0);

    const setMon = (val) => {
      if (val == "本周") {
        data.newdata = getTime(0);
        data.parameter.date = 1;
      } else if (val == "上一周") {
        data.newdata = getTime(-7);
        data.parameter.date = 0;
      } else {
        data.newdata = getTime(7);
        data.parameter.date = 2;
      }
      setScheData(data.parameter);
    };
    //修改医生排班数据
    const amendWorkData = (obj) => {
      amendWork(obj).then((res) => {
        if (res.data.code == 200) {
          tishi.open2("修改成功");
          setpbDate(data.doctorForm);
        } else {
          tishi.open3("修改失败");
        }
      });
    };
    //添加排班数据
    const addWorkData = (obj) => {
      addWork(obj).then((res) => {
        if (res.data.code == 200) {
          tishi.open2("添加成功");
          setpbDate(data.doctorForm);
        } else {
          tishi.open3("添加失败");
        }
      });
    };
    //请求医生的排班数据
    const setpbDate = (obj) => {
      setDocterDate(obj).then((res) => {
        data.newDoctor = res.data.data;
        data.newDoctor.forEach((item) => {
          item.sched_date = formatDay(item.sched_date);
        });
        for (let i = 0; i < data.newDoctor.length; i++) {
          if (data.newDoctor[i].sched_date == data.newClickDate.date) {
            if (data.newDoctor[i].am) {
              data.swhaoyan = data.newDoctor[i].am;
              data.contents = "号源数:";
            } else {
              data.swhaoyan = "休息";
              data.contents = null;
            }
            if (data.newDoctor[i].pm) {
              data.xwhaoyan = data.newDoctor[i].pm;
              data.contents = "号源数:";
            } else {
              data.xwhaoyan = "休息";
              data.contents = null;
            }
            if (data.newDoctor[i].am_sy) {
              data.swjezhou = data.newDoctor[i].am_sy;
            } else {
              if (data.newDoctor[i].am) {
                data.swjezhou = 0;
              } else {
                data.swjezhou = null;
              }
            }
            if (data.newDoctor[i].pm_sy) {
              data.xwjezhou = data.newDoctor[i].pm_sy;
            } else {
              if (data.newDoctor[i].pm) {
                data.xwjezhou = 0;
              } else {
                data.xwjezhou = null;
              }
            }

            break;
          } else {
            data.swhaoyan = null;
            data.xwhaoyan = null;
            data.swjezhou = null;
            data.xwjezhou = null;
          }
        }
      });
    };
    //打开日历
    const changerow = (obj) => {
      // data.newDoctor = obj;
      data.doctorForm.id = obj.dt_id;
      data.addPbFrom.id = obj.dt_id;
      data.dialogTableVisible = ref(true);
      setpbDate(data.doctorForm);
    };
    //页码变化
    const changePage = (page) => {
      data.parameter.page = page;
      setScheData(data.parameter);
    };
    //点击日历
    const selectDay = (val) => {
      datapass.value = new Date();
      datapass1.value = new Date();
      data.newClickDate = times(val.day);
      for (let i = 0; i < data.newDoctor.length; i++) {
        if (data.newDoctor[i].sched_date == val.day) {
          if (data.newDoctor[i].am) {
            data.swhaoyan = data.newDoctor[i].am;
            data.contents = "号源数:";
          } else {
            data.swhaoyan = "休息";
            data.contents = null;
          }
          if (data.newDoctor[i].pm) {
            data.xwhaoyan = data.newDoctor[i].pm;
            data.contents = "号源数:";
          } else {
            data.xwhaoyan = "休息";
            data.contents = null;
          }
          if (data.newDoctor[i].am_sy) {
            data.swjezhou = data.newDoctor[i].am_sy;
          } else {
            if (data.newDoctor[i].am) {
              data.swjezhou = 0;
            } else {
              data.swjezhou = null;
            }
          }
          if (data.newDoctor[i].pm_sy) {
            data.xwjezhou = data.newDoctor[i].pm_sy;
          } else {
            if (data.newDoctor[i].pm) {
              data.xwjezhou = 0;
            } else {
              data.xwjezhou = null;
            }
          }

          break;
        } else {
          data.swhaoyan = null;
          data.xwhaoyan = null;
          data.swjezhou = null;
          data.xwjezhou = null;
        }
      }
      // data.newDoctor.forEach((item) => {
      //   item.sched_date = formatDay(item.sched_date);

      //   if (item.sched_date == val.day) {

      //   }
      // });
    };
    //点击排班日期
    const amendDay = (val) => {
      data.newClickDate = times(val.day);
      for (let i = 0; i < data.newDoctor.length; i++) {
        if (data.newDoctor[i].sched_date == val.day) {
          if (data.newDoctor[i].am) {
            data.swhaoyan = data.newDoctor[i].am;
            data.contents = "号源数:";
          } else {
            data.swhaoyan = "休息";
            data.contents = null;
          }
          if (data.newDoctor[i].pm) {
            data.xwhaoyan = data.newDoctor[i].pm;
            data.contents = "号源数:";
          } else {
            data.xwhaoyan = "休息";
            data.contents = null;
          }
          if (data.newDoctor[i].am_sy) {
            data.swjezhou = data.newDoctor[i].am_sy;
          } else {
            if (data.newDoctor[i].am) {
              data.swjezhou = 0;
            } else {
              data.swjezhou = null;
            }
          }
          if (data.newDoctor[i].pm_sy) {
            data.xwjezhou = data.newDoctor[i].pm_sy;
          } else {
            if (data.newDoctor[i].pm) {
              data.xwjezhou = 0;
            } else {
              data.xwjezhou = null;
            }
          }

          break;
        } else {
          data.swhaoyan = null;
          data.xwhaoyan = null;
          data.swjezhou = null;
          data.xwjezhou = null;
        }
      }
    };
    const calendar = ref();
    const calendar1 = ref();
    const selectDate = (val) => {
      calendar.value.selectDate(val);
      let b = new Date();
      if (val == 0) {
        datapass.value = b.setMonth(b.getMonth() - 1);
        data.doctorForm.date = 4;
      } else if (val == 1) {
        datapass.value = b.setMonth(b.getMonth());
        data.doctorForm.date = 5;
      } else {
        data.doctorForm.date = 6;
        datapass.value = b.setMonth(b.getMonth() + 1);
      }
      setpbDate(data.doctorForm);
    };
    const selectDate1 = (val) => {
      calendar1.value.selectDate(val);
      let b = new Date();
      if (val == 0) {
        datapass1.value = b.setMonth(b.getMonth() - 1);
        data.doctorForm.date = 4;
      } else if (val == 1) {
        datapass1.value = b.setMonth(b.getMonth());
        data.doctorForm.date = 5;
      } else {
        data.doctorForm.date = 6;
        datapass1.value = b.setMonth(b.getMonth() + 1);
      }
      setpbDate(data.doctorForm);
    };
    //关闭日历
    const cancelPai = () => {
      data.dialogTableVisible = ref(false);
      data.parameter.id = null;
    };

    //打开设置排班
    const setPaiban = () => {
      data.addPbFrom.date = data.newTimes.date;
      data.dialogTableVisible1 = ref(true);
      data.dialogTableVisible = ref(false);
    };
    //提交排班
    const savaSet = () => {
      data.addPbFrom.am = data.swhaoyan;
      data.addPbFrom.pm = data.xwhaoyan;
      data.addPbFrom.date = data.newClickDate.date;
      let arr = [];
      data.newDoctor.forEach((item) => {
        arr.push(item.sched_date);
      });
      if (arr.indexOf(data.addPbFrom.date) == -1) {
        addWorkData(data.addPbFrom);
      } else {
        amendWorkData(data.addPbFrom);
      }
      // data.dialogTableVisible1 = ref(false);
      // data.dialogTableVisible = ref(true);
    };
    //取消设置
    const cancel = () => {
      data.dialogTableVisible1 = ref(false);
      data.dialogTableVisible = ref(false);
      data.parameter.id = null;
    };
    //重置
    const resetSH = () => {
      data.parameter.search = null;
      data.parameter.one_id = null;
      data.parameter.two_id = null;
      data.parameter.date = null;
      data.parameter.page = 1;
      setScheData(data.parameter);
    };
    //搜索查询
    const seachys = (val) => {
      if (val == "") {
        data.parameter.search = null;
      } else {
        data.parameter.search = val;
      }
      setScheData(data.parameter);
    };
    //选择科室查询
    const changeVal = (val) => {
      if (val == "") {
        data.parameter.one_id = null;
        data.parameter.two_id = null;
      } else {
        data.parameter.one_id = val[0];
        data.parameter.two_id = val[1];
      }
      setScheData(data.parameter);
    };

    //请求科室数据

    const setKsdata = () => {
      setDesk().then((res) => {
        let out = [];
        res.data.data.forEach((item) => {
          if (out.indexOf(item.department_one_id) == -1) {
            let obj = {
              value: "",
              label: "",
              children: [],
            };
            let obj1 = {
              value: "",
              label: "",
            };
            out.push(item.department_one_id);
            obj.value = item.department_one_id;
            obj.label = item.department_one_name;
            obj1.value = item.department_two_id;
            obj1.label = item.department_two_name;
            obj.children.push(obj1);

            data.options.push(obj);
          } else {
            let obj1 = {
              value: "",
              label: "",
            };
            obj1.value = item.department_two_id;
            obj1.label = item.department_two_name;
            data.options[out.indexOf(item.department_one_id)].children.push(
              obj1
            );
          }
        });
      });
    };
    setKsdata();
    //请求排班数据
    const setScheData = (obj) => {
      setScheduling(obj).then((res) => {
        data.count = res.data.count;
        data.tableData = res.data.data;
        data.tableData.forEach((item) => {
          item.has.forEach((ele) => {
            ele.sched_date = formatDay(ele.sched_date);
          });
        });
      });
    };
    setScheData(data.parameter);
    return {
      ...toRefs(data),
      setMon,
      changerow,
      changePage,
      selectDay,
      selectDate,
      calendar,
      setPaiban,
      savaSet,
      cancel,
      cancelPai,
      calendar1,
      selectDate1,
      changeVal,
      seachys,
      resetSH,
      amendDay,
      vsdate,
      datapass,
      datapass1,
    };
  },
};
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
}
.main {
  height: 100%;
}

.container {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 16px;
  background-color: #fff;
  border-radius: 8px;
}
.table-connent {
  width: 100%;
  margin-top: 20px;
  .caozuo .el-icon {
    padding: 6px;
  }
}
.pages {
  width: 100%;
}
.el-dialog {
  padding: 0;

  .arrange {
    display: flex;
    height: 100%;
    .left-text {
      width: 20%;
      padding: 20px;
      background-color: rgb(238, 143, 54);
      display: flex;
      flex-direction: column;
      color: #fff;
      .name {
        font-size: 18px;
      }
      .time {
        h2 {
          margin-bottom: 6px;
        }
        p {
          margin: 0;
          font-size: 16px;
        }
      }
      .odas {
        width: 100%;
        background-color: #c05a16;
        border: none;
      }
    }
    .right-set {
      width: 80%;

      .el-calendar {
        ::v-deep(.current) {
          height: 100%;
          &:hover {
            color: #222;
          }
        }
        ::v-deep(.el-calendar__header) {
          padding: 30px;
        }
        ::v-deep(.el-calendar-day) {
          padding: 0;
        }
        .content {
          text-align: center;
          width: 100%;
          height: 100%;
          .dateri {
            margin-bottom: 10px;
          }
          p {
            margin: 0;
            // padding: 8px;
            // padding-top: 8px;
            &:nth-child(1) {
              padding-top: 14px;
              font-size: 16px;
            }
          }
          .haoyuan {
            font-size: 16px;
          }
        }
        ::v-deep(td.is-selected) {
          background-color: #0066ff;
          color: #fff;
        }
        .set-left {
          display: flex;
          align-items: center;
          span {
            margin-right: 20px;
          }
        }
      }
    }
  }
  .closepai {
    margin-top: 20px;
    div {
      padding: 12px 0;
    }
    .bar {
      width: 100%;
      height: 1px;
      background-color: rgb(252, 242, 234);
      margin: 0;
      padding: 0;
    }
  }
}
// .el-dialog .el-dialog__header {
//   padding: 0;
//   margin: 0;
// }
// .el-dialog .el-dialog__body {
//   padding: 0;
// }
.set-paiban {
  .arrange {
    .el-switch {
      ::v-deep(.el-switch__core) {
        width: 60px;
        border-radius: 12px;
        height: 24px;
        display: flex;
        align-items: center;
        .el-switch__inner {
          top: 3px;
        }
        .el-switch__action {
          top: 3px;
        }
      }
    }

    .jz-btn {
      display: flex;
      justify-content: space-between;
      margin: 0;
      padding: 0;
    }
  }
}
</style>
<style lang="scss">
.calendar-paiban {
  .el-dialog__header {
    padding: 0;
    margin: 0;
  }
  .el-dialog__body {
    padding: 0;
  }
}
</style>
